<template>
    <div>
        <el-form :model="form" :rules="rules" ref="reForm" label-width="120px" label-position="left" class="mb_40">
            <el-form-item label="发送给" v-if="msgtype==2">
                <span v-if="msgtype==2">{{rowinfo.user.user_login}}</span>
            </el-form-item>
            <el-form-item v-else label="发送给" prop="uid" >
                <el-select  v-model="form.uid" placeholder="请选择用户" :disabled='msgtype==2' multiple style="width:100%">
                    <el-option v-for="(item,index) in userList" :label="item.user_login" :value="item.id" :key="index"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="标题：" prop="title">
                <el-input v-model="form.title" placeholder="请输入标题" />
            </el-form-item>
            <el-form-item label="内容：" prop="text">
                <el-input v-model="form.text" type="textarea" rows="8" maxlength="800" show-word-limit placeholder="请输入内容" />
            </el-form-item>
        </el-form>
        <div class="dialog-userfooter">
            <el-button @click="handleCancle">取 消</el-button>
            <el-button type="primary" :loading='saveloading' @click="handleSave">确 定</el-button>
        </div>
    </div>
</template>
<script>
import { mapState } from 'vuex'
import {sendMsg,replyMsg} from '@/api/message'
export default {
   
    data(){
        return {
            form:{
                uid:[],
                title:'',
                text:''
            },
            rules:{
                uid:[{ required: true, message: '请选择用户', trigger: 'change' }],
                title:[{ required: true, message: '请输入标题', trigger: 'blur' }],
                text:[{ required: true, message: '请输入内容', trigger: 'blur' }],
            },
            userList:[],
            saveloading:false
        }
    },

    props:{
        rowinfo:{
            type:Object,
            default:null
        },
        msgtype:{
            type:Number,
            default:1
        }
    },

    computed:{
        ...mapState({
            user: state => state.user.user,
        }),
    },

    created(){
        // 用户列表
        this.getDicts('/check/user/checkuser').then(res=>{
            this.userList = res.data.filter(item=>this.user.u_id!=item.id);
        });
        if(this.msgtype==2){
            console.log('status_name:',this.rowinfo);
            this.form.title = this.rowinfo.title;
        }
    },

    methods:{
        handleSave(){
            this.$refs.reForm.validate(valid=>{
                if(!valid) return;
                // 发消息
                if(this.msgtype == 1){
                    this.saveloading = true;
                    sendMsg(this.form).then(res=>{
                        if(res.code == 1){
                            this.$message.success('发送成功');
                            this.handleCancle(1)
                        }
                    }).finally(()=>{
                        this.saveloading = false;
                    })
                }else{
                    // 回复
                    this.saveloading = true;
                    let params = {
                        id:this.rowinfo.id,
                        text:this.form.text,
                        title:this.form.title,
                    }
                    replyMsg(params).then(res=>{
                        if(res.code == 1){
                            this.$message.success('回复成功');
                            this.handleCancle(1)
                        }
                    }).finally(()=>{
                        this.saveloading = false;
                    })
                }
                
            })
        },

        handleCancle(type){
            this.$emit('close',type)
        },
    }
}
</script>
<style lang="scss" scoped>

</style>